import { ProForm as AntProForm } from '@ant-design/pro-components';
import { useNode, UserComponent } from '@craftjs/core';
import {
  BaseForm,
  type IBaseFormProps,
} from '@jeoshi-design/rex-design.data-entry.core';
import { NodeBox } from '../../components/NodeBox';
import { Settings } from './settings';

export const ProForm: UserComponent<IBaseFormProps> = ({ ...rest }) => {
  const { nodeId } = useNode((node) => {
    return {
      nodeId: node.id,
    };
  });

  // console.log(rest);

  return (
    <NodeBox id={nodeId}>
      <AntProForm>
        {/* TODO: antd pro treeSelect 组件,字段映射的逻辑,会原对象上进行修改,导致直接报错,craftjs 会把默认参数进行冻结 */}
        <BaseForm {...JSON.parse(JSON.stringify(rest))} />
      </AntProForm>
    </NodeBox>
  );
};

ProForm.craft = {
  displayName: 'ProForm',
  related: {
    settings: Settings,
  },
  defaultProps: {
    fields: [
      {
        valueType: 'input',
        field: 'input',
        label: '文本框',
      },
      {
        valueType: 'treeSelect',
        field: 'treeSelect',
        label: '树形选择框',
        options: [
          { label: 'Light', value: 'light' },
          { label: 'Light2', value: 'light2' },
        ],
      },
    ],
  },
};
